<!-- PV曲线图组件 -->
<template>
  <div class="pv-chart-container">
    <div ref="chartContainer" class="chart"></div>
  </div>
</template>

<script>
import Highcharts from 'highcharts'

export default {
  name: 'PvChart',
  data() {
    return {
      chart: null,
      chartOptions: {
        chart: {
          type: 'line',
          backgroundColor: 'transparent',
          height: '100%',
          marginTop: 60,
          spacing: [10, 10, 15, 10]
        },
        title: {
          text: '日最大功率和发电量',
          style: {
            color: '#b9b7b7',
            fontSize: '14px'
          },
          align: 'left',
          margin: 20
        },
        xAxis: {
          categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
          labels: {
            style: {
              color: '#b9b7b7',
              fontSize: '12px'
            }
          },
          lineColor: '#404040',
          gridLineColor: '#404040'
        },
        yAxis: {
          title: {
            text: '功率/发电量 (kW)',
            style: {
              color: '#b9b7b7'
            }
          },
          labels: {
            style: {
              color: '#b9b7b7',
              fontSize: '12px'
            }
          },
          gridLineColor: '#404040'
        },
        series: [
          {
            name: '最大功率',
            data: [2320, 3340, 4325, 3350, 4560, 3470, 3890, 3100, 3110, 1120, 1130, 1440, 1550, 1360, 1370, 1180, 1190, 1200, 1210, 1220, 990, 1240, 450, 260],
            color: '#0ad35e'
          },
          {
            name: '发电量',
            data: [2, 3, 5, 4, 5, 6, 4.8, 3.9, 4.1, 3.1, 3.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 1.5, 1.3, 1.2, 1, 0.4, 0.2],
            color: '#40a0ff'
          }
        ],
        credits: {
          enabled: false
        },
        legend: {
          align: 'right',
          verticalAlign: 'top',
          itemStyle: {
            color: '#b9b7b7',
            fontWeight: 'normal'
          },
          itemHoverStyle: {
            color: '#fff'
          }
        },
        plotOptions: {
          series: {
            marker: {
              enabled: false
            },
            states: {
              hover: {
                lineWidth: 2
              }
            }
          }
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.destroy()
    }
  },
  methods: {
    initChart() {
      if (this.$refs.chartContainer) {
        this.chart = Highcharts.chart(this.$refs.chartContainer, this.chartOptions)
      }
    }
  }
}
</script>

<style scoped>
.pv-chart-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.chart {
  width: 100%;
  height: 100%;
  min-height: 200px;
}

:deep(.highcharts-container) {
  width: 100% !important;
  height: 100% !important;
}
</style>